<script setup lang="ts">
import {getPreListApi, addPreApi, updatePreApi} from "@/api/pre/index";
import {submitOrderApi} from "@/api/order/index";
import {ref, onMounted} from "vue";
import mitt from "@/utils/mitt/index";
import {ElMessage} from "element-plus";
import addressMask from "@/commpents/address/index.vue";
import {useRouter} from "vue-router";
//获取路由对象
const router = useRouter();


//获取地址信息(全部)
let preList = ref([]);
//判断是添加还是修改 0是添加 1是修改 2是切换
let or = ref(0)
//获取表单地址信息
let addressObj = ref({});
//获取地址信息
let addressArr = ref([]);

//获取整体数据
async function getPreList() {
  let res = await getPreListApi();
  if (res.msg === '操作成功') {
    preList.value = res.result;
    addressArr.value = preList.value.userAddresses;
    addressObj.value = addressArr.value[0];
  }
}


//地址蒙层控制
const showAddress = ref(false);

//添加地址蒙层控制
function addShowAddress() {
  showAddress.value = true;
  or.value = 0;
  mitt.emit("AddShowAddress", {showAddress: showAddress.value, or: or.value});
}

//获取添加地址返回出来的数据
async function sendCloseAddMask(data: object) {
  addressObj.value = data.addAddressObj;
  let res = await addPreApi(addressObj.value);
  if (res.msg === '操作成功') {
    showAddress.value = data.showAddress;
    ElMessage.success('地址添加成功');
    getPreList();
  }
}

//修改地址蒙层控制
function emitShowAddress() {
  showAddress.value = true;
  or.value = 1;
  mitt.emit("emitShowAddress", {showAddress: showAddress.value, or: or.value, addressObj: addressObj.value});
}

//获取修改地址返回出来的数据
async function sendCloseEmitMask(data: object) {
  //关闭蒙层
  showAddress.value = data.showAddress;
  addressObj.value = data.emitAddressObj;
  let res = await updatePreApi(addressObj.value.id, addressObj.value);
  if (res.msg === '操作成功') {
    ElMessage.success('修改地址成功');
    getPreList();
  }
}

//切换地址
function changAddress() {
  or.value = 2;
  showAddress.value = true;
  mitt.emit("getAddressArr", {showAddress: showAddress.value, or: or.value, addressArr: addressArr.value});
}

//切换地址数据
function sendChangeAddress(data: object) {
  showAddress.value = data.showAddress;
  addressObj.value = data.changeAddressObj;
}

//提交订单
async function sumbitOrder() {
  let orderObj = {
    deliveryTimeType: 1,
    payType: 1,
    payChannel: 1,
    buyerMessage: "",
    goods: preList.value.goods,
    addressId: addressObj.value.id,
  }
  let res = await submitOrderApi(orderObj);
  if (res.msg === '操作成功') {
    ElMessage.success('订单提交成功');
    let order = res.result;
    router.push({
      name: 'pay',
      params: {
        orderId: order.id
      }
    })
  }
}

onMounted(() => {
  getPreList();
})
</script>

<template>
  <div class="address">
    <div class="address-heart">
      <!--      收货地址-->
      <div class="address-info">
        <div class="address-title">
          <h3>收货地址</h3>
        </div>
        <div class="address-content">
          <div class="address-content-left">
            <div class="address-content-left-text">
              <p><span>收货人:</span> {{ addressObj?.receiver }}</p>
              <p><span>联系方式:</span> {{ addressObj?.contact }}</p>
              <p><span>收货地址:</span> {{ addressObj?.fullLocation }}</p>
            </div>
            <div class="address-content-left-change">
              <el-button link type="primary" @click="emitShowAddress">修改地址</el-button>
            </div>
          </div>
          <div class="address-content-right">
            <span @click="changAddress">切换地址</span>
            <span @click="addShowAddress">添加地址</span>
          </div>
        </div>
      </div>
      <!--      商品信息-->
      <div class="address-goods">
        <div class="address-title">
          <h3>商品信息</h3>
        </div>
        <div class="address-goods-content">
          <table>
            <thead>
            <tr>
              <th>商品信息</th>
              <th>单价</th>
              <th>数量</th>
              <th>小计</th>
              <th>实付</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in preList?.goods" :key="index">
              <td class="goods-td">
                <div class="goods-img">
                  <img v-lazy-img="item.picture">
                </div>
                <div class="goods-text">
                  <p>{{ item.name }}</p>
                  <p>{{ item.attrsText }}</p>
                </div>
              </td>
              <td>￥{{ item.price }}</td>
              <td>{{ item.count }}</td>
              <td>￥{{ item.totalPrice }}</td>
              <td>￥{{ item.totalPayPrice }}</td>
            </tr>
            <!-- 可以继续添加更多行来展示其他商品 -->
            </tbody>
          </table>
        </div>
      </div>
      <!--      配送时间-->
      <div class="address-time">
        <div class="address-title">
          <h3>配送时间</h3>
        </div>
        <div class="address-time-content">
          <div class="address-time-content-item">
            <a href="javascript:;" class="active">不限送货时间：周一至周日</a>
          </div>
          <div class="address-time-content-item">
            <a href="javascript:;">工作日送货：周一至周五</a>
          </div>
          <div class="address-time-content-item">
            <a href="javascript:;">双休日送货：周六至周日</a>
          </div>
        </div>
      </div>
      <!--      支付方式-->
      <div class="address-pay">
        <div class="address-title">
          <h3>支付方式</h3>
        </div>
        <div class="address-pay-content">
          <div class="address-pay-content-item">
            <a href="javascript:;" class="active">在线支付</a>
          </div>
          <div class="address-pay-content-item">
            <a href="javascript:;">货到付款</a>
          </div>
          <div class="address-pay-content-item">
            <a href="javascript:;">货到付款需付5元手续费</a>
          </div>
        </div>
      </div>
      <!--      金额明细-->
      <div class="address-money">
        <div class="address-title">
          <h3>金额明细</h3>
        </div>
        <div class="address-money-content">
          <div class="address-money-content-left"></div>
          <div class="address-money-content-right">
            <div class="address-money-content-right-item">
              <div class="address-money-content-right-item-text">
                <span>商品件数:</span>
              </div>
              <div class="address-money-content-right-item-price">
                <span>{{ preList.summary?.goodsCount }}</span>
              </div>
            </div>
            <div class="address-money-content-right-item">
              <div class="address-money-content-right-item-text">
                <span>商品总价:</span>
              </div>
              <div class="address-money-content-right-item-price">
                <span>￥{{ preList.summary?.totalPrice }}</span>
              </div>
            </div>
            <div class="address-money-content-right-item">
              <div class="address-money-content-right-item-text">
                <span>运费:</span>
              </div>
              <div class="address-money-content-right-item-price">
                <span>￥{{ preList.summary?.postFee }}</span>
              </div>
            </div>
            <div class="address-money-content-right-item">
              <div class="address-money-content-right-item-text">
                <span>应付金额:</span>
              </div>
              <div class="address-money-content-right-item-price">
                <span>￥{{ preList?.summary?.totalPayPrice }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      按钮-->
      <div class="address-btn">
        <div class="address-btn-left"></div>

        <div class="address-btn-right">
          <el-button type="primary" size="large" @click="sumbitOrder">提交订单</el-button>
        </div>

      </div>
    </div>
    <addressMask @sendCloseAddMask="sendCloseAddMask" @sendChangeAddress="sendChangeAddress"
                 @sendCloseEmitMask="sendCloseEmitMask"></addressMask>
  </div>

</template>

<style scoped>
.address {
  width: 100%;
  background-color: #f5f5f5;
  padding: 1.66667rem 0;
  box-sizing: border-box;
}

.address-heart {
  width: var(--primary-heart-width);
  background-color: #fff;
  margin: 0 auto;
  padding: 1.66667rem 1.66667rem 6.77778rem;
  box-sizing: border-box;
}

.address-info {
  padding-bottom: 4.16667rem;
  box-sizing: border-box;
}

.address-title h3 {
  font-size: 1.33333rem;
  color: #333;
  font-weight: normal;
}

.address-title {
  padding-bottom: 1.66667rem;
  border-bottom: 2px solid #f5f5f5;
}

.address-content {
  margin-top: 1.66667rem;
  border: 1px solid #f5f5f5;
  padding: 1.66667rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.address-content-left {
  flex: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 4.16667rem;
  box-sizing: border-box;
  border-right: 1px solid #f5f5f5;
}

.address-content-right {
  flex: 1;
  padding-left: 4.16667rem;
  box-sizing: border-box;
}

.address-content-left-text p {
  font-size: 1.125rem;
  margin-bottom: 0.83rem;
}

.address-content-left-text p span {
  display: inline-block;
  margin-right: 0.83rem;
  color: #999;
}

.address-content-right {
  display: flex;
}

.address-content-right span {
  display: inline-block;
  font-size: 1.125rem;
  color: #333;
  width: 11.66667rem;
  height: 3.83333rem;
  text-align: center;
  line-height: 3.83333rem;
  border: 1px solid #c4c4c4;
  margin-right: 0.66rem;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 0; /* 移除默认的单元格间距 */
}

th, td {
  border-bottom: 1px solid #f5f5f5; /* 下划线 */
  padding: 1.667rem; /* 单元格内边距 */
  text-align: left;
}

th {
  background-color: #f5f5f5; /* 表头背景颜色 */
}

tbody {
  background-color: #fff; /* tbody背景颜色 */
}

tr {
  /* 如果需要行之间的额外空间，可以使用margin-bottom，但请注意，并非所有浏览器都支持tr的margin */
  /* margin-bottom: 1.667rem; */
  font-size: 1.125rem;
}

/* 使用box-sizing来确保padding不会增加单元格的总宽度 */
th, td {
  box-sizing: border-box;
}

.address-time, .address-pay, .address-money {
  padding-top: 4.16667rem;
  box-sizing: border-box;
}

.address-time-content, .address-pay-content, .address-money-content {
  margin-top: 2.5rem;
  display: flex;
  gap: 1.66667rem;
}


.address-time-content-item a, .address-pay-content-item a {
  padding: 1rem 1.66667rem;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
  border-radius: 0.5rem;
  font-size: 1.125rem;
}

.address-pay-content-item:last-child a {
  border: none;
  color: #999;
}

.address-money-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2.5rem;
  box-sizing: border-box;
}

.address-money-content-right {
  width: 25rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;

}

.address-money-content-right-item {
  justify-content: space-between;
  display: flex;
  font-size: 1.125rem;
}

.address-money-content-right-item:last-child .address-money-content-right-item-price span {
  font-size: 1.33333rem;
  color: #cf4444;
}

.address-btn {
  padding-top: 8.33333rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2.5rem;
}

.goods-td {
  display: flex;
  gap: 0.83333rem;
}

.goods-img img {
  width: 6.6rem;
  height: 6.6rem;
  object-fit: cover;
}

.goods-text p:first-child {
  margin-bottom: 0.43rem;
}

.goods-text p:last-child {
  color: #999;
}

.active {
  border: 1px solid var(--primary-color) !important;
}
</style>